<%--
  Created by IntelliJ IDEA.
  User: huangrulan
  Date: 2019/4/17
  Time: 10:00 AM
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>充值</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="Author" content="larry"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="${base}/assets/css/layui/layui.css">
    <style>
        .layui-btn-primary {
            border: 1px solid #C9C9C9;
            background-color: #fff;
            color: #555;
            width: 100px;
            height: 100px;
        }

        .layui-btn-primary.checked {
            background-color: #009588;
            color: #fff;
            border: 1px solid #009588;
        }
        .layui-layer.layui-layer-iframe{
            top: 150px;
        }
    </style>
</head>
<body>
<div class="layui-fluid larryms-article">
    <div class="layui-tab-content larryms-panel-body">
        <form class="layui-form" id="userForm" action="${base}/ticket/user/save.do"
              enctype="multipart/form-data" method="post" style="margin-top: 20px;">

            <input type="hidden" name="id" value="${user.id}">
            <input type="hidden" name="balance" value="${user.balance}">

            <div class="layui-form-item">
                <label class="layui-form-label">选择金额：</label>
                <div class="layui-input-block">
                    <button type="button" class="layui-btn layui-btn-primary money">100</button>
                    <button type="button" class="layui-btn layui-btn-primary money">200</button>
                    <button type="button" class="layui-btn layui-btn-primary checked money">300</button>
                </div>
                <div class="layui-input-block" style="margin-top: 20px;">
                    <button type="button" class="layui-btn layui-btn-primary money">500</button>
                    <button type="button" class="layui-btn layui-btn-primary money">800</button>
                    <button type="button" class="layui-btn layui-btn-primary money">1000</button>
                </div>
                <input type="hidden" name="money" value="300">
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">确认密码：</label>
                <div class="layui-input-block">
                    <input type="password" name="password" autocomplete="off" class="layui-input" placeholder="请输入账号密码"
                           lay-verify="required" style="width: 330px;">
                </div>
            </div>

            <div class="center" style="text-align: center; margin-top: 20px;">
                <button type="button" class="layui-btn" lay-submit lay-filter="submitCharge"
                        style="width: 400px;">确认充值
                </button>
            </div>
        </form>
    </div>
</div>
</div>
<script src="${base}/assets/js/layui/layui.js"></script>
<script>
    layui.use(['form', 'element', 'layer', 'jquery'], function () {
        var form = layui.form, element = layui.element, layer = layui.layer, $ = layui.jquery;

        $(document).on("click", ".money", function () {
            $.each($(".money"), function () {
                if ($(this).hasClass("checked")) {
                    $(this).removeClass("checked");
                }
            });
            $(this).addClass("checked");
            console.log($(this).text());
            moneyVal();
        });

        function moneyVal() {
            $.each($(".money"), function () {
                if ($(this).hasClass("checked")) {
                    $("input[name=money]").val($(this).text());
                }
            });
        }

        form.on('submit(submitCharge)', function (data) {
            $.ajax({
                url: 'recharge.do',
                data: {
                    "id": $("input[name=id]").val(),
                    "money": $("input[name=money]").val(),
                    "balance": $("input[name=balance]").val(),
                    "password": $("input[name=password]").val()
                },
                type: 'POST',
                dataType: 'json',
                async: false,
                success: function (res) {
                    console.log(1111);
                    if (res.success) {
                        layer.msg("充值成功", {icon: 1, time: 2000}, function () {
                            parent.location.href = "userInfo.page?userId=${user.id}";
                        });
                    } else {
                        layer.msg(res.msg, {icon: 5, time: 2000}, function () {

                        });
                    }
                }
            });
        });
    });
</script>
</body>
</html>
